<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container class="v-container" fluid fill-height grid-list-md>
      <v-layout row wrap align-center>
        <span class="subheading">筛选</span>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-text-field label="问题名称" v-model="filter.name" @blur="$refs.table.update()"></v-text-field>
        </v-flex>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-select :items="[{id:-1,name:'全部'},{id:0,name:'身体形态'},{id:1,name:'身体机能'},{id:2,name:'身体素质'},{id:3,name:'拓展测试'}]" item-text="name" item-value="id" label="问题类型" v-model="filter.type" search-input @change="$refs.table.update()"></v-select>
        </v-flex>
        <v-flex xs12>
          <v-btn color="info" @click="newQuestion">新增</v-btn>
          <v-btn color="warning" @click="$refs.table.deleteQuestion()">删除</v-btn>
        </v-flex>
        <v-flex xs12>
          <question-table ref="table" :question="filter.name" :type="filter.type" @edit="editQuestion" @up="up" @down="down"></question-table>
        </v-flex>
      </v-layout>
    </v-container>
    <question-dialog ref="dialog" @update="$refs.table.update()"></question-dialog>
  </div>
</template>

<script>
import questionTable from './QuestionTable'
import questionDialog from './QuestionDialog'
import { postConsultAnswerUp, postConsultAnswerDown } from '../../api/consult'
export default {
  name: 'Question',
  components: {
    questionTable,
    questionDialog
  },
  data: () => ({
    breadcrumbs: [
      {
        text: '咨询',
        disabled: true
      },
      {
        text: '解答',
        disabled: true
      }
    ],
    filter: {
      type: -1,
      name: ''
    }
  }),
  methods: {
    newQuestion () {
      this.$refs.dialog.show('新建解答')
      this.$refs.dialog.clear()
    },
    editQuestion (data) {
      this.$refs.dialog.show('修改解答')
      this.$refs.dialog.get(data)
    },
    up (id) {
      postConsultAnswerUp(id).then((res) => {
        this.$refs.table.update()
      })
    },
    down (id) {
      postConsultAnswerDown(id).then((res) => {
        this.$refs.table.update()
      })
    }
  }
}
</script>

<style scoped>

</style>
